$(document).ready(function(){
	$(".grid").masonry({
	  // options
	  // columnWidth: ".grid-sizer",
	  // percentPosition: true,
	  itemSelector: ".grid-item",
	  horizontalOrder: false,
	  isAnimated: true,
	});
	
	var cur_index = 0 ;
	var g_pic_url_list = [] ;
	// $(".grid>.grid-item").each(function (index) {
	// 	g_pic_url_list.push($(this).children("img").attr("src")) ;
	// })
	$.get(get_g_pic_url_list, function (result, statues, xml) {
		if (result) {
            // const json_data = JSON.parse(result);
            // let post_list = JSON.parse(json_data["pic_list"]);
            // console.log(result["pic_list"]);
            g_pic_url_list = result["pic_list"] ;
            g_pic_url_list.forEach(function (value, index) {
            	const new_item = `<div class="grid-item">
	            	<img src="${value.file_url}">
					<span class="file-name">
						${value.file_name}
					</span>
				</div>`;
				setTimeout(function () {
					const $new_item = $(new_item) ;
					// $(".grid").append($new_item) ;
					$new_item.imagesLoaded(function(){
						$(".grid").append($new_item).masonry("appended", $new_item, true);
					});
				}, 500);
            }) ;
        }
	}) ;
	
	// 必须对此初始化操作做延迟，目的是确保css渲染有时间响应
	// 直接从服务器同源加载js太快了，渲染速度更不上会出现失效的问题
	// 慢速资源也不会出现这种问题
	$('body').on('click', ".grid-item img", function () {
		// const src = $(this).children("img").attr("src") ;
		// const src = $(this).attr("src") ;
		// const src = $(this).attr("src") ;
	
		cur_index = $(this).parent(".grid-item").index() ;
		const src = g_pic_url_list[cur_index].file_url ;
		var ele_img = document.createElement("img");
		// var ele_cl = document.createElement("div");
	    var ele_a = document.createElement("div");
	    var ele_l = document.createElement("div");
	    var ele_r = document.createElement("div");
	    var ele_bkg = document.createElement("div");

	    ele_img.setAttribute("src",src);
	    ele_img.setAttribute("class","show-img-src");
	    // ele_cl.setAttribute("class","show-img-clear");
	    ele_l.setAttribute("class","show-img-left");
	    ele_r.setAttribute("class","show-img-right");
	    ele_a.setAttribute("class","show-img-box");
	    ele_bkg.setAttribute("class","show-img-bkg");

	    ele_a.append(ele_img);
	    ele_a.append(ele_l);
	    ele_a.append(ele_r);
	    ele_a.append(ele_bkg);
	    //ele_a.append(ele_cl);
	    $("body").append(ele_a);
	    // setTimeout(function () {
	    //   flag = 1 ;
	    // }, 1000);
	}) ;
	/*
	$('body').on('click', ".show-img-box .show-img-clear", function(){
		$(".show-img-box").remove() ;
	}) ;
	*/
	$('body').on('click', ".show-img-box .show-img-left", function(){
		// $(".show-img-box").remove() ;
		--cur_index;
		if (cur_index<0) {
			cur_index = 0 ;
		}
		$(".show-img-box .show-img-src").attr("src", g_pic_url_list[cur_index]) ;
	}) ;
	$('body').on('click', ".show-img-box .show-img-right", function(){
		// $(".show-img-box").remove() ;
		++cur_index;
		if (cur_index>=g_pic_url_list.length) {
			cur_index = g_pic_url_list.length-1 ;
		}
		$(".show-img-box .show-img-src").attr("src", g_pic_url_list[cur_index].file_url) ;
	}) ;

	$('body').on('click', ".show-img-src", function(){
	    $(".show-img-box").remove() ;
	}) ;
	$('body').on('click', ".show-img-bkg", function(){
		$(".show-img-bkg").toggleClass("show-img-box-white") ;
	}) ;
	
}) ;